<template>
	<view class="detail" >
		<view class="backimgs" :style="{backgroundImage:'url('+ backimg +')'}">	</view>
		<view class="detaildata">
			<Detop />
			<Deheader />
			<Demsg :info='parentmsg'/>
			<Other />
			<ShowButt />
		</view>
	</view>
</template>

<script setup>
	import { onLoad } from '@dcloudio/uni-app'
	
	import Detop from '../../components/detail/detop.vue'
	import Deheader from '../../components/detail/deheader.vue'
	import Demsg from '../../components/detail/demsg.vue'
	import Other from '../../components/detail/other.vue'
	import ShowButt from '../../components/detail/showbutt.vue'
	import {reqSearMsg} from '../../api/index.js'
	
	import {
		useStore,
	} from 'vuex'
	import {
		ref,
		onMounted,
		computed,
		onBeforeUnmount,
		onBeforeMount,
		onUpdated
	} from 'vue'
	
	
	// 父组件传的值
	let parentmsg = ref('')
// 接收仓库中的数据
	let backimg = ref('')
	let store = useStore()
	onLoad(options => {
		// console.log(options.id);
		// console.log(options.lists);
		// store.dispatch('getSearMsg',options.id)
	})
	onMounted(() => {
		backimg.value = store.state.detail.list.coverImgUrl
		// console.log(store.state.detail.list)
		// console.log(backimg.value);
	})

	

	

</script>

<style lang="scss" scoped>
	.detail{
		width: 100%;
		height: 1000px;
		position: relative;
		.backimgs{
			width: 100%;
			height: 100%;
			z-index: -1;
			background-repeat:no-repeat;		
			background-size:cover;
			filter: blur(7px);
		}
		.detaildata{
			width: 100%;
			position: absolute;
			z-index: 100px;
			top: 0px;
			
		}
	}
</style>
